<template>
    <div class='pv_container'>
        <div class="pv_content">
            <list-message v-if="playVideoFlag == 'list'" :sendData="sendData"></list-message>
            <my-message v-else :sendData="sendData"></my-message>
        </div>
        <div class="footer" v-show="isFooter">
            <div class="footer_left" :class="{ 'blue': playVideoFlag == 'list' }" @click="listHandler">
                <i class="el-icon-time" style="font-size: 24px;"></i>
                <div style="font-size: 14px;font-weight: 900;">播放记录</div>
            </div>
            <div class="footer_right" :class="{ 'blue': playVideoFlag == 'my' }" @click="myHandler">
                <i class="el-icon-user" style="font-size: 24px;"></i>
                <div style="font-size: 14px;font-weight: 900;">我的</div>
            </div>
        </div>
    </div>
</template>

<script>
import listMessage from '@/views/mainComponents/playVideo/listMessage.vue'
import myMessage from '@/views/mainComponents/playVideo/myMessage.vue'
export default {
    name: "playVideo",
    props: ["sendData"],
    components: {
        listMessage,
        myMessage,
    },
    data() {
        return {
            playVideoFlag: 'list',//控制列表界面和我的界面的显隐
            isFooter: true,//控制footer的显隐
        };
    },

    created() {

    },
    mounted() {
        if (this.sendData.class == '爱奇艺体育' || this.sendData.class == '爱奇艺VR') {
            this.isFooter = false;
            this.playVideoFlag = 'my'
        }else {
            this.playVideoFlag = 'list';
        }
    },
    watch: {
        sendData(newVal) {
            this.isFooter = true
            if (newVal.class == '爱奇艺体育' || newVal.class == '爱奇艺VR') {
                this.isFooter = false;
                this.playVideoFlag = 'my'
            } else {
                this.playVideoFlag = 'list';
            }
        }
    },
    methods: {
        //点击消息图标触发的回调
        listHandler() {
            this.playVideoFlag = 'list';
        },
        //点击我的图标触发的回调
        myHandler() {
            this.playVideoFlag = 'my';
        },
    },
};
</script>

<style lang='scss' scoped>
.blue {
    color: #03a3e3;
}

.pv_container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;

    .pv_content {
        flex: 1;


    }

    .footer {
        height: 50px;
        border-top: 1px solid #e4e4e4;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;

        .footer_left {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    @media screen and (min-width: 2360px) {
        .footer {
            height: 9vh;

        }
    }
}
</style>